<template>
  <div class="contant">
    <div class="shopcar">
      <headers class="headers">
        <template #texts>购物车</template>
      </headers>
      <div class="showcar" v-if="setShowcar" :style="setstyle">
        <router-link to="/index" tag="div">您的购物车空空如也点我快快去购物</router-link>
      </div>

      <!-- 购物车中有商品 -->
      <div v-else>
        <van-checkbox-group
          v-model="result"
          ref="checkboxGroup"
          class="chosebox"
          @change="handleCheckedCitiesChange"
        >
          <transition v-for="data in cities" :key="data.goods_id">
            <van-checkbox class="chose" :name="data" label-disabled>
              <van-card class="card" :thumb="data.hd_thumb_url">
                <template #title>
                  <div>{{data.short_name}}</div>
                </template>
                <template #desc>
                  <div>{{data.short_name}}</div>
                </template>
                <template #tags>
                  <div class="chose-kind">
                    <div class="chose-color">
                      <span>颜色:</span>
                      <span></span>
                    </div>
                    <div class="chose-size">
                      <span>尺寸:</span>
                      <span></span>
                    </div>
                  </div>
                </template>
                <template #price>
                  <span style="color:red">￥ {{data.normal_price/100}}</span>
                </template>
                <template #footer>
                  <div class="adddec">
                    <div class="btn" @click="redceNum(data)">-</div>
                    <!-- <div class="btn" @click="redceNum">-</div> -->
                    <div class="num">{{data.numb}}</div>
                    <!-- <div class="btn" @click="addNum">+</div> -->
                    <div class="btn" @click="addNum(data)">+</div>
                  </div>
                </template>
              </van-card>
            </van-checkbox>
          </transition>
        </van-checkbox-group>

        <div class="car-botton">
          <van-checkbox checked-color="#07c160" v-model="checked" @click="checkAll($event)">全选</van-checkbox>
          <div class="computer">
            <span>合计：</span>
            <span style="color:red">￥{{setSum}}</span>
          </div>

          <div class="goPay" @click="Gopay">去结算</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import headers from "@/components/Headers";
import http from "@/util/http";
import {mapActions} from 'vuex'
import { Button, Card, Tag, Checkbox, CheckboxGroup, Radio, Empty } from "vant";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Card);
Vue.use(Button);
Vue.use(Tag);
Vue.use(Radio);
Vue.use(Empty);
const cityOptions = [];

/**
 * @param  setstyle 购物车为空时样式
 * @param result 选择的数据组
 * @param cities 购物车数组用来渲染页面
 * @param showcar 判断渲染的页面
 * @param sum 计算总会
 *
 */
export default {
  data() {
    return {
      checked: false,
      cities: [],
      result: [],
      showcar: true,
      setstyle: {
        height: 0,
        background: "lemonchiffon",
      },
      sum: 0,
    };
  },
  methods: {
    ...mapActions("shopCar",['setShopCars','setsome']),
    //改变全选按钮的状态
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      console.log(this.result);
      this.checked = checkedCount === this.cities.length;
      this.setResolute;
    },

    //  全选按钮的选择
    checkAll(e) {
      if (this.checked) {
        this.result = [...this.cities];
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.result = [];
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    // 增加数量
    addNum(value) {
      value.numb++;
      this.setResolute;
    },
    // 减少数据
    redceNum(value) {
      if (value.numb) {
        value.numb--;
        console.log(value)
        // 将变更后的数据进行本地存储

        localStorage.setItem()
        
        this.setResolute;
        // ...讲变更后的数据存储到网路
        //未操作
      } else {
        let filtlist = this.cities.filter((item) => item.goods_id!= value.goods_id);
        this.cities = [...filtlist];
        this.setShowcar;
        this.setShowHeight();
      }
    },
    // 设置空购物车的样式
    setShowHeight() {
      this.setstyle.height = window.innerHeight + "px";
    },
    Gopay() {
      // console.log(this.result)
     this.setShopCars(this.result)
     this.setsome(this.sum)
      this.$router.push("/gopay");
    },

    GetDetalist() {
      // 获取存储中的数据
      let cars = JSON.parse(localStorage.getItem("shopcar"));
      // 判断本地是否有存储
      if (cars) {
        this.cities = cars;
      } else {
        http.get("gouwuche").then((res) => {
          this.cities = res.data.goods_list;
          let shopcar = JSON.stringify(this.cities);
          // 将数据存储到 localStorage
          localStorage.setItem("shopcar", shopcar);
          console.log(res.data.goods_list, this.cities, "goods");
        });
      }
    },
  },

  computed: {
    // 设置是否显示空购物车
    setShowcar() {
      this.cities.length === 0 ? true : false;
    },

    // 计算总和
    setResolute() {
      this.sum = 0;
      let _this = this;
      // 计算总和
      this.result.forEach((item) => {
        _this.sum += (item.normal_price / 100) * item.numb;
      });
    },
    // 计算结果保留小数点后2位
    setSum() {
      return this.sum.toFixed(2);
    },
  },
  components: {
    headers,
  },
  mounted() {
    this.setShowcar;
    this.setShowHeight();
    this.GetDetalist();
  },
  updated() {
    this.setShowHeight();
  },
};
</script>

<style lang="scss" scoped>
.contant {
  background-color: #e2dddd;
}
.shopcar {
  margin-top: 5.2rem;
  position: relative;
  overflow: auto;

  margin-left: 10px;
  margin-right: 10px;
  .headers {
    background: white;
  }

  .chosebox {
    margin-bottom: 131px;
  }
  .showcar {
    background: lemonchiffon;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .chose {
    background: rgb(250, 248, 248);
    margin: 11px 0;
    padding: 0 0 5px 10px;
    border-radius: 12px;
    & :nth-child(2) {
      width: 96%;
      margin-bottom: 2px;
      & .num {
        width: 33%;
        height: 24px;
        line-height: 24px;
        text-align: center;
        display: inline-block;
        // background: white;
        margin-bottom: 0;
        font-size: 15px;
        color: red;
      }
    }
    .adddec {
      border: 1px slategrey solid;
      width: 30%;
      float: right;
      text-align: center;
      display: flex;
      border-radius: 8px;
      .btn {
        font-size: 20px;
        width: 33%;
      }
    }
    .chose-kind {
      &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .chose-color {
        float: left;
        width: 70px;
        display: flex;
      }
      .chose-size {
        float: right;
        width: 70px;
        display: flex;
        overflow: hidden;
      }
      span {
        display: inline-block;
        padding-right: 3px;
        white-space: nowrap;
      }
    }
  }

  .card {
    width: 100%;
    padding-right: 35px;
    background: rgb(250, 248, 248);
  }

  .car-botton {
    box-sizing: border-box;
    z-index: 999;
    background: white;
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    display: flex;
    box-shadow: 7px 9px -1px gainsboro;
    padding: 10px;
    line-height: 31px;
    justify-content: space-between;
    line-height: 31px;
    .computer {
      font-size: 1.5rem;
      text-align: right;
      flex: 1;
      padding-right: 22px;
    }
    .goPay {
      width: 100px;
      text-align: center;
      background: red;
      height: 31px;
      line-height: 31px;
      color: white;
      border-radius: 20px;
    }
  }
  .car-botton :after {
    contain: "";
    content: ".";
    height: 1px;
    background: gainsboro;
    position: absolute;
    bottom: 1px;
    left: 0px;
    right: 0px;
  }
}
</style>